# 内容弹框 (Modal)

### **代码演示**

### 1. 基本使用

```jsx live=true
class View extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false,
    };

    this.showModal = this.showModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  showModal() {
    this.setState({
      show: true,
    });
  }

  closeModal() {
    this.setState({
      show: false,
    });
  }

  render() {
    return (
      <>
        <Button onClick={this.showModal}>新增</Button>
        {this.state.show && (
          <Modal title={"添加用户"} onCancel={this.closeModal}>
            <div>我是内容区</div>
          </Modal>
        )}
      </>
    );
  }
}
```

### 2. 宽高

```jsx live=true
class View extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false,
    };

    this.showModal = this.showModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  showModal() {
    this.setState({
      show: true,
    });
  }

  closeModal() {
    this.setState({
      show: false,
    });
  }

  render() {
    return (
      <>
        <Button onClick={this.showModal}>编辑</Button>
        {this.state.show && (
          <Modal
            width={600}
            onCancel={this.closeModal}
            bodyStyle={{ backgroundColor: "orangred" }}
          >
            <div
              style={{
                height: "250px",
                backgroundColor: "lightblue",
                overflow: "auto",
              }}
            >
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区</div>
              <div>我是内容区3333333333</div>
            </div>
          </Modal>
        )}
      </>
    );
  }
}
```

### 3. 内容区域样式

```jsx live=true
class View extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false,
    };

    this.showModal = this.showModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  showModal() {
    this.setState({
      show: true,
    });
  }

  closeModal() {
    this.setState({
      show: false,
    });
  }

  render() {
    return (
      <>
        <Button onClick={this.showModal}>编辑</Button>
        {this.state.show && (
          <Modal
            title={"内容主体标签上的样式"}
            onCancel={this.closeModal}
            style={{ width: "500px", height: "500px" }}
            bodyStyle={{ backgroundColor: "orangered", color: "white" }}
          >
            <div></div>
          </Modal>
        )}
      </>
    );
  }
}
```

### 4. 按纽文字

```jsx live=true
class View extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false,
    };

    this.showModal = this.showModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  showModal() {
    this.setState({
      show: true,
    });
  }

  closeModal() {
    this.setState({
      show: false,
    });
  }

  render() {
    return (
      <>
        <Button onClick={this.showModal}>审批</Button>
        {this.state.show && (
          <Modal
            onCancel={this.closeModal}
            okText={"审批通过"}
            cancelText={"驳回"}
          >
            <div style={{ height: "300px" }}>这里展示一些相关信息</div>
          </Modal>
        )}
      </>
    );
  }
}
```

### 5. 自定义底部

```jsx live=true
class View extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false,
    };

    this.showModal = this.showModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  showModal() {
    this.setState({
      show: true,
    });
  }

  closeModal() {
    this.setState({
      show: false,
    });
  }

  render() {
    return (
      <>
        <Button onClick={this.showModal}>审批</Button>
        {this.state.show && (
          <Modal
            onCancel={this.closeModal}
            footer={
              <SpaceWraper>
                <Button
                  onClick={() => {
                    alert("事件我自已处理");
                  }}
                >
                  审批
                </Button>

                <Button
                  onClick={() => {
                    alert("事件我自已处理");
                  }}
                >
                  驳回
                </Button>

                <Button
                  disabled
                  onClick={() => {
                    this.closeModal();
                  }}
                >
                  暂不审批
                </Button>
              </SpaceWraper>
            }
          >
            <div style={{ height: "300px" }}>这里展示一些相关信息</div>
          </Modal>
        )}
      </>
    );
  }
}
```

### **属性**

| 参数       | 说明       | 类型   | 可选值 | 默认值 |
| ---------- | ---------- | ------ | ------ | ------ |
| width      | 宽度       | number | -      | -      |
| height     | 高度       | number | -      | -      |
| className  | 类         | string | -      | -      |
| style      | 外层样式   | css    | -      | -      |
| bodyStyle  | 内容区样式 | css    | -      | -      |
| okText     | 确定文本   | css    | -      | -      |
| cancelText | 取消文本   | css    | -      | -      |

### **事件**

| 参数     | 说明 | 类型     | 可选值 | 默认值 |
| -------- | ---- | -------- | ------ | ------ |
| onOk     | 确定 | function | -      | -      |
| onCancel | 取消 | function | -      | -      | - |
